import React from 'react'
import {useState,useEffect} from 'react';
import { useHistory } from 'react-router';
import './Painting.css';
import img1 from './img/operation.png';

const Admin = () => {
    const [data,setData] = useState([]);
    const [num,setNum] = useState(1);
    const history = useHistory()
    useEffect(() => {
        fetch("https://api.luffe.club:3001/admin")
        .then(res=>res.json())
        .then(res=>{
            // console.log(res.data)
            setData(res.data)
        })
        .catch(err=>{
            console.log(err)
        })
    }, [])
    const pre = ()=>{
        if(num>1){
            setNum(num-1)
        }
    }
    const next = ()=>{
        if(num<data.length/10)
            setNum(num+1);
    }
    const addAdmin  = ()=>{
        history.push('/index/addadmin')
    }
    const del = (adminId)=>{
        console.log(adminId);
        fetch("https://api.luffe.club:3001/admin/?adminId="+adminId,{
            method:'delete',
            mode: 'cors',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
        })
        .then(res=>res.text())
        .then(res=>{           
            var newArr = data.filter((_,index)=>adminId!=data[index].adminId);
            setData(newArr);
        })
        .catch(err=>{
            console.log(err);
        })
    }
    return (
        <div className="board">
            <div className="info">
                <h3>管理员列表</h3>
                <div id = "find">
                    <div className="add">
                        <img src={img1} alt=''></img>
                        <button onClick={()=>addAdmin()}>添加管理员信息</button>
                    </div>
                </div>
                <table className="painting">
                    <tbody>
                    <tr>
                        <th>管理员id</th>
                        <th>编辑权限</th>
                        <th>删除权限</th>
                        <th>操作</th>
                    </tr>
                {
                    data.map((item,index)=>{
                        // console.log(item,item.adminId,item.editP,item.deleteP)
                        if(index<=num*10 && index>=(num-1)*10){
                        return(
                        <tr>
                            <td>{item.adminId}</td>
                            <td>{item.editP}</td>
                            <td>{item.deleteP}</td>
                            <td><button onClick={()=>history.push('/index/udadmin'+item.adminId)}>修改</button><button onClick={()=>del(item.adminId)}>删除</button></td>
                        </tr>
                        )
                        }
                    }
                    )
                }
                </tbody>                    
                </table>
                <div className="next">
                    <p>每页显示10条</p>
                    <button>第{num}页</button>
                    <button onClick={pre}>上一页</button>
                    <button onClick={next}>下一页</button>
                </div>
            </div>
        </div>
    )
}

export default Admin